<template>
  <div class="mapbox">
    <baidu-map class="map" @ready="handler" center="中国" :map-click="false">
      <bml-marker-clusterer :averageCenter="true">
        <div v-for="(marker, i) of markers" :key="i">
          <!-- 自定义图标打开这个 -->
         <!-- <bm-marker
          :dragging="true"
          animation="BMAP_ANIMATION_BOUNCE"
          :icon="{url: marker.url, size: { width: 300, height: 171 }}"
          :position="{lng: marker.lng, lat: marker.lat}"
          @click="infoWindowOpen(marker)"
          > -->
          <!-- 原始图标 -->
          <bm-marker
            :dragging="true"
            animation="BMAP_ANIMATION_BOUNCE"
            :position="{ lng: marker.lng, lat: marker.lat }"
            @click="infoWindowOpen(marker)"
          >
            <bm-info-window
              title="弹窗信息"
              :position="{ lng: marker.lng, lat: marker.lat }"
              :show="marker.showFlag"
              @close="infoWindowClose(marker)"
              @open="infoWindowOpen(marker)"
            >
              <p>123456789</p>
              <p>123456789</p>
              <p>123456789</p>
              <p>123456789</p>
              <p>123456789</p>
            </bm-info-window>
          </bm-marker>
        </div>
      </bml-marker-clusterer>
    </baidu-map>
  </div>
</template>

 <script>
// 按需引入点聚合
import { BmlMarkerClusterer } from "vue-baidu-map";
// 引入marker
import BmMarker from "vue-baidu-map/components/overlays/Marker";

// 插入 100 个随机点
const markers = [];
for (let i = 0; i < 10; i++) {
  const position = {
    lng: Math.random() * 40 + 85,
    lat: Math.random() * 30 + 21,
    url: "http://developer.baidu.com/map/jsdemo/img/fox.gif",
    showFlag: false,
  };
  const position1 = {
    lng: Math.random() * 40 + 85,
    lat: Math.random() * 30 + 21,
    url: "https://cdn.tipe.io/tipe/tipe-cat-no-text.svg",
    showFlag: false,
  };
  if (i % 2 === 0) {
    markers.push(position);
  } else {
    markers.push(position1);
  }
}
const carList = [{}];
export default {
  name: "Bmaptrace",
  components: {
    BmlMarkerClusterer,
    BmMarker,
  },
  data() {
    return {
      BMap: "",
      map: "",
      markers,
      carList,
      show: false,
    };
  },
  methods: {  
    handler({ BMap, map }) {
      map.enableScrollWheelZoom(true);
      // map.centerAndZoom('青岛市', 13)
      // 赋值，方便调用，本节没用到
      this.BMap = BMap;
      this.map = map;
    },
    // 关闭信息窗口 @close 自带的方法
    infoWindowClose(marker) {
      marker.showFlag = false;
      console.log(marker);
    },
    // 首先点击marker时开启信息窗口，其实没必要在 bm-info-window 上写 @open 因为如果是关闭状态根本就点不到，所以就无法触发 @open
    // 如果在 bm-info-window 上写了 @open 在点击marker时会触发两次infoWindowOpen函数，而且可以很明显的看到有延时
    infoWindowOpen(marker) {
      marker.showFlag = true;
      console.log(marker);
    },
  },
};
</script>
<style scoped>
.map {
  height: 800px;
}
</style>